<template>
  <div>
    <el-card class="promote-add-card">
      <div slot="header">
          <el-page-header @back="back" >
            <template slot="content">
              <div>
                <span>活动添加</span>
              </div>
            </template>
          </el-page-header>
      </div>
      <div class="deep-out">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name" class="my-input"></el-input>
          </el-form-item>
          
          <el-form-item label="活动时间">
            <el-date-picker
              class="my-input"
              v-model="form.startDateTime"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
              <el-date-picker
              class="my-input"
              v-model="form.endDateTime"
              type="datetime"
              placeholder="datetime"
              style="display:inline-block;margin-left:1rem;"
            ></el-date-picker>
          </el-form-item>
     
          
      
          <el-form-item label="活动类型">
            <div>   <el-radio-group v-model="form.type" class="my-input">
              <el-radio
                v-for="item of type"
                :key="item"
                :label="item"
              ></el-radio>
            </el-radio-group></div>
         
          </el-form-item>

          <el-form-item label="降价金额" v-if="form.type == '限时降价'">
            <el-input v-model="form.discount" class="my-input"></el-input>
          </el-form-item>

          <el-form-item label="赠送商品" v-if="form.type == '赠品促销'"
            ><el-input v-model="form.gift" class="my-input"></el-input
          ></el-form-item>

          <el-form-item label="活动海报">
            <el-upload
              :multiple="false"
              ref="idCardImg-back-side"
              action=" "
              list-type="picture-card"
              :auto-upload="false"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.detail"></el-input>
          </el-form-item>
          <el-row :gutter="10">
            <el-col :span="6" :offset="9">    <el-button  class="btn" type="primary" @click="add">保存</el-button></el-col>
          </el-row>
      
        </el-form>
      </div>
    </el-card>
    
  </div>
</template>
<script>
import { mapState } from "vuex";
import m_day from '../assets/m_day'
var fill_O = function(str,length){
  let t = str.split().reverse()
  while(t.length<length){
    t.push('0')
  }
  return t.reverse().join("")
}
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
    add() {
      let data = {
        startDateTime: m_day.parseUTCDate(this.form.startDateTime),
        endDateTime:  m_day.parseUTCDate(this.form.endDateTime),
        activityName: this.form.name,
        activityId: fill_O(String(this.db_activity.length+1),3),
        detail: this.form.detail,
        gift: this.form.gift,
        range: "全场通用",
        postImg: this.form.postImg,
        type: this.form.type,
        discount: this.form.discount,
      };
      //假的axios
      // this.$store.commit("add_activity", data);
      this.$store.state.db_activity.push(data)
      //
      this.$message.success("添加成功");
      this.$router.push("/home/activity-show");
    },
    handleTableSelect(selection) {
      this.form.range = selection;
      this.selectedItem = selection;
    },
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
  },
  computed: {
    
    ...mapState(["db_activity","current_property_index", "current_property"]),
    total() {
      return this.table.length;
    },
    tableData() {
      let start = (this.currentPage - 1) * this.pagesize;
      let end = this.currentPage * this.pagesize;
      let t = this.table.slice(start, end).concat();
      while (t.length != this.pagesize)
        t.push({ id: "--", name: "--", type: "--" });
      return t;
    },
  },
  data() {
    return {
      selectedItem: [],
      pagesize: 5,
      currentPage: 1,
      table: [
        {
          id: "001",
          name: "A北区部分上架",
          type: "普通销售",
        },
        {
          id: "002",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "003",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "004",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "005",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "006",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "007",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
      ],
      type: ["限时降价", "赠品促销"],
      range: ["适用全场", "指定车位"],
      form: {
        name: "",
        startDateTime: "",
        endDateTime: "",
        type: "",
        range: "",
        postImg: null,
        detail: "",
        discount: 0,
        gift: "",
      },
    };
  },
};
</script>

<style scoped>

.el-card {
  margin-top: 2rem;
}
.promote-add-card {
  margin-bottom: 1rem;
}
.el-form {
  width: 70%;
  margin: auto;
}
.el-pagination {
  margin-top: 1rem;
  text-align: center;
}
.header {
  position: relative;
}
.btn {
  width: 100%;
}
.my-input{
  width: 100%;

}


.deep-out >>> .el-form-item__content{
  display: flex;

  height: inherit;

}

.my-input{
  text-align: start;
  align-self: center;
}
</style>